import React, { useCallback, useState, useMemo, useEffect } from 'react';
import Header from '@/component/layout/Header/Header';
import CommonList from '@/component/common/CommonList/CommonList';
import { getQuestionnaireList, shareMeeting } from '@/network/protocol';
import { formatTime } from '@/util/util'
import qs from "querystring";
import Tab from '@/component/layout/Tab/Tab';

import './style.less'

const QuestionNaireList = (props) => {
  const { location, location: { search } } = props;

  const [param, setParam] = useState({ pageIndex: 1, pageSize: 20, type: 1 })

  const update = useCallback(() => {
    setParam({ ...param, pageIndex: param.pageIndex + 1 })
  }, [param])

  const isshare = useMemo(() => {
    let search = location.search;
    if (!search) return;
    let str = search.slice(1);
    let param = qs.parse(str);
    return param.isshare
  }, [location.search])


  const View = useCallback((props) => {
    const { data } = props;

    return <a className="QuestionNaireList-list-item" href={data.url}>
      <p className="p1">
        <span className="p1-title">{data.title}</span>
        <span className="p1-time">{formatTime(data.pubTime)}</span>
      </p>
      <p className="p2">
        {data.shortIntroduce}
      </p>
    </a>
  }, [])

  const wx = useMemo(() => window.wx, [])

  const configwx = useCallback(async (item) => {
    // let url1 = 'http://haosen.shmatching.com/academicDetail/';
    let url = window.location.href.split('#')[0];
    // let url1 = encodeURIComponent(url)
    let res = await shareMeeting({ url: encodeURIComponent(url) })

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.appid, // 必填，公众号的唯一标识
      // appId: 'wx8e2e302c607a8e05', // 必填，公众号的唯一标识
      timestamp: '' + res.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.noncestr, // 必填，生成签名的随机串
      signature: res.signature,// 必填，签名
      jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'] // 必填，需要使用的JS接口列表
    });


    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
      wx.updateAppMessageShareData({
        title: '豪森药业', // 分享标题
        desc: '问卷调查', // 分享描述
        link: `${url}#/questionnaire?isshare=1`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'http://haosen.shmatching.com/1.jpg', // 分享图标 
        success: function () {
          // 设置成功
        },
        error: function () {
        }
      })
    });

  }, [wx])

  useEffect(() => {
    configwx();
  }, [configwx])





  return (
    <>
      <Header center={<span>问卷调查</span>} />
      <div className="global-content QuestionNaireList-box" >
        {/* <a className="QuestionNaireList-list-item" href="http://baidu.com">
          <p className="p1">
            <span className="p1-title">{1111}</span>
            <span className="p1-time">{2222}</span>
          </p>
          <p className="p2">
            <span>{33333}</span>
          </p>
        </a> */}


        <CommonList update={update} viewCmp={View} method={getQuestionnaireList} param={param} />

      </div>
      {
        isshare ? null : <Tab history={props.history} />
      }
    </>
  )
}
export default QuestionNaireList 
